<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>轩昊科技</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="global-monitor">
      <div class="department-monitor" v-for="dep in depMachines" :key="`dep_${dep.departmentCode}`">
        <div class="department">{{dep.deptName}}</div>
        <div class="workShop-monitor" v-for="workShop in dep.workshops" :key="`workShop_${workShop.id}`">
          <div class="workShop">{{workShop.workshopName}}</div>
          <el-row class="machine-monitor">
            <el-col class="machine-col" v-for="machine in workShop.machines" :key="`machine_${machine.equipmentNo}`">
              <machine-item :machine="machine" @img-click="machineDetail(machine)"></machine-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-dialog fullscreen :visible.sync="openDetailDialog" :lock-scroll="true" :show-close="true" @closed="detailDialogClose">
        <div slot="title">
          <span style="color:#303133;font-size:18px;">设备监控详情</span>
          <el-button type="primary" size="small" style="margin-left:10px;" @click="closeDialog">返回</el-button>
        </div>
        <monitor-detail v-if="openDetailDialog" :machine="selectMachine"></monitor-detail>
      </el-dialog>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "../base.css",
    "../components/css/machineItem.css",
    "./css/monitorDetail.css"
  ]);
</script>
<script src="../utils/moduleUtil.js"></script>
<script src="../components/machineItem.js"></script>
<script src="../components/electricalMonitorTable.js"></script>
<script src="../components/machineDynamicTable.js"></script>
<script src="./monitorDetail.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      return {
        loading: false,
        deps: [],
        depMachines: [],
        timeout: null,
        hasTimeout: true,
        openDetailDialog: false,
        selectMachine: {}
      };
    },
    created: function () {
      this.initData();
    },
    destroyed: function () {
      this.clearSysTimeOut();
    },
    methods: {
      initData: function () {
        var self = this;
        this.loading = true;
        this.getDepartment().then(function (deps) {
          self.deps = deps;
          self.loading = false;
          self.setMachineData(true);
        });
      },

      setMachineData(hasLoading) {
        if (hasLoading) {
          this.loading = true;
        }
        var self = this;
        var deps = this.deps;
        this.clearSysTimeOut();
        this.getMachineData().then(function (machineData) {
          if (hasLoading) {
            self.loading = false;
          }

          var groupMachine = _.groupBy(machineData, 'workShopId');

          var depMachines = [];
          for (var i = 0; i < deps.length; i++) {
            var dep = deps[i];
            var workshops = dep.workshops;
            var machineWorkShops = [];
            for (var j = 0; j < workshops.length; j++) {
              var workshop = workshops[j];
              var machines = groupMachine[workshop.id];
              if (machines !== undefined) {
                workshop.machines = machines;
                machineWorkShops.push(workshop);
              }
            }
            if (machineWorkShops.length > 0) {
              dep.workshops = machineWorkShops;
              depMachines.push(dep);
            }
          }

          self.depMachines = depMachines;
          if (!self.hasTimeout) {
            return;
          }

          var timeout = window.setTimeout(function () {
            self.setMachineData();
          }, 5000);
        });
      },

      getDepartment: function () {
        return new Promise(function (resole, reject) {
          ajaxRequest('equipment/getDepartmentDropdown').then(function (deps) {
            resole(deps);
          }).catch(function (error) {
            resole([]);
          });
        });
      },

      getMachineData: function () {
        return new Promise(function (resole, reject) {
          ajaxRequest('equipment/getAllMachine').then(function (res) {
            resole(res);
          }).catch(function (error) {
            resole([]);
          });
        });
      },

      machineDetail: function (machine) {
        this.selectMachine = _.cloneDeep(machine);
        this.openDetailDialog = true;
        this.clearSysTimeOut();
        this.hasTimeout = false;
      },

      closeDialog: function () {
        this.openDetailDialog = false;
      },

      detailDialogClose: function () {
        this.selectMachine = {};
        this.hasTimeout = true;
        this.setMachineData();
      },

      clearSysTimeOut: function () {
        var timeout = this.timeout;
        if (timeout !== null) {
          window.clearTimeout(timeout);
        }
      }
    },
    components: {
      MachineItem: MachineItem,
      MonitorDetail: MonitorDetail
    }
  });
</script>
<style>
  .global-monitor {
    padding: 20px;
  }

  .department-monitor .department {
    font-size: 20px;
    height: 35px;
    line-height: 30px;
  }

  .workShop-monitor .workShop {
    font-size: 18px;
    height: 25px;
    line-height: 25px;
    padding-left: 20px;
  }

  .machine-monitor {
    min-width: 600px;
  }

  .machine-monitor .machine-col {
    text-align: center;
    margin-top: 20px;
  }

  @media screen and (max-width:2209px)  {
    .machine-monitor .machine-col {
      width: 14.285714285714286%;
    }
  }

  @media screen and (min-width:0px) {
    .machine-monitor .machine-col {
      width: 100%;
    }
  }

  @media screen and (min-width:659px) {
    .machine-monitor .machine-col {
      width: 50%;
    }
  }

  @media screen and (min-width:969px) {
    .machine-monitor .machine-col {
      width: 33.33333333333333%;
    }
  }

  @media screen and (min-width:1279px) {
    .machine-monitor .machine-col {
      width: 25%;
    }
  }

  @media screen and (min-width:1589px) {
    .machine-monitor .machine-col {
      width: 20%;
    }
  }

  @media screen and (min-width:1899px) {
    .machine-monitor .machine-col {
      width: 16.666666666666664%;
    }
  }
</style>

</html>